<template>
  <div class="myCourses">
    <!-- 路由页面是在授课程、已授课程才显示 -->
    <div
      class="creativeInfo"
      :style="[
        {
          backgroundImage:
            'url(' + require('@/assets/images/mycoursebg.png') + ')',
          'background-image': 'linear-gradient(90deg, )',
        },
      ]"
    >
      <div class="container">
        <breadcrumb />
        <div class="position">
          <div class="picture">
            <img v-lazy="headPic" />
          </div>
          <div class="info">
            <div class="name">
              {{ userInfo.nickName || userInfo.regName || userInfo.email }}
            </div>
            <div
              class="label"
              v-for="(item, index) in userInfo.authName"
              :key="index"
            >
              {{ item }}
            </div>
          </div>
          <div
            class="countInfo"
            v-if="userInfo.authNum && userInfo.authNum.indexOf(2) !== -1"
          >
            <!-- <div class="infoBox">
              <div class="title">发布数</div>
              <div class="desc">{{publishCourses.length}}</div>
            </div> -->
            <div class="infoBox">
              <div class="title">设计数</div>
              <div class="desc">{{ designCourses.length }}</div>
            </div>
            <!-- <div class="infoBox">
              <div class="title">学时</div>
              <div class="desc">0</div>
            </div> -->
          </div>
          <!-- <div
            class="countInfo"
            v-if="userInfo.authNum && userInfo.authNum.indexOf(1) !== -1"
          >
            <div class="infoBox">
              <div class="title">学习时长</div>
              <div class="desc">0</div>
            </div>
            <div class="infoBox">
              <div class="title">通过科目</div>
              <div class="desc">0</div>
            </div>
            <div class="infoBox">
              <div class="title">经验</div>
              <div class="desc">0</div>
            </div>
            <div class="infoBox">
              <div class="title">积分</div>
              <div class="desc">0</div>
            </div>
            <div class="infoBox">
              <div class="title">关注</div>
              <div class="desc">0</div>
            </div>
          </div> -->
        </div>
      </div>
    </div>
    <myCoursesPage @handleChangePage="handleChangePage" :changeDuring="changeDuring" />
    <div class="switchBtn">
      <!-- <el-switch v-model="currDuring"/> -->
      <!-- <span class="activeDesc">{{currDuring ? '正在进行': '已完成'}}</span> -->
      <el-radio-group v-model="currDuring">
        <el-radio :label="true">正在进行</el-radio>
        <el-radio :label="false">已完成</el-radio>
      </el-radio-group>
    </div>
    <!-- <router-view v-if="$route.name === 'courseStatistics'"></router-view> -->
    <myStudy v-if="currPage === 'myStudy'" />
    <studied v-if="currPage === 'myStudied'" />
    <myTeaching v-if="currPage === 'myTeaching'" />
    <taught v-if="currPage === 'myTaught'" />
    <myDesign v-if="currPage === 'myDesign'" />
    <designed v-if="currPage === 'myDesigned'" />
  </div>
</template>

<script>
const myCoursesPage = () => import("@/components/myCoursesPage/myCoursesPage");
const breadcrumb = () => import("@/components/Breadcrumb/index");
const myStudy = () => import("@/views/myCourses/studying/studying");
const designed = () => import("@/views/myCourses/designed/designed");
const myDesign = () => import("@/views/myCourses/inDesign/inDesign");
const studied = () => import("@/views/myCourses/studied/studied");
const taught = () => import("@/views/myCourses/taught/taught");
const myTeaching = () => import("@/views/myCourses/teaching/teaching");
import { mapState } from "vuex";
import { location } from "@/util/tool";
export default {
  components: {
    myCoursesPage,
    breadcrumb,
    myStudy,
    designed,
    myDesign,
    studied,
    taught,
    myTeaching,
  },
  data() {
    return {
      currPage: "",
      changeDuring: "",
      currDuring: true,
      pageNames: {
        myStudy: { "true": "myStudy", "false": "myStudied", name},
        myStudied: { "true": "myStudy", "false": "myStudied", name},
        myTeaching: { "true": "myTeaching", "false": "myTaught", name},
        myTaught: { "true": "myTeaching", "false": "myTaught", name},
        myDesign: { "true": "myDesign", "false": "myDesigned", name},
        myDesigned: { "true": "myDesign", "false": "myDesigned", name},
      }
    };
  },
  computed: {
    ...mapState({
      userInfo: (state) => state.user.userInfo,
      designCourses: (state) => state.courses.designcourselist,
      publishCourses: (state) => state.courses.myTeaching.filter(item => item.publishStaffUserID == state.user.userInfo.userID)
    }),
    headPic() {
      return this.userInfo.iconPath === "/iconPath.png"
        ? require("@/assets/images/headPic.svg")
        : this.userInfo.iconPath;
    },
  },
  watch: {
    currDuring(n) {
      this.changePage(this.pageNames[this.currPage][`${n}`])
    }
  },
  methods: {
    handleChangePage(pageName) {
      // this.currPage = pageName;
      this.changePage(this.pageNames[pageName][`${this.currDuring}`])
      this.$store.commit("page/setPageName", {name: "myCoursePageName",value: pageName,});
    },
    changePage(pageName) {
      this.changeDuring = pageName
      this.currPage = pageName
    }
  },
  mounted() {
    // this.handleChangePage(this.$store.state.page.myCoursePageName)
    const getPageName = this.$store.state.page.myCoursePageName
    getPageName && this.changePage(this.pageNames[getPageName][`${this.currDuring}`])
    this.$store.dispatch("courses/fetchCoursesList");
  }
};
</script>

<style lang="stylus">
.myCourses {
  .creativeInfo {
    height: 200px;
    background-color: #003262;
    background-repeat: no-repeat;
    background-size: 100% 100%;

    .container {
      padding: 15px 0 0;
      margin: 0 auto;
      max-width: 1200px;
      height: 100%;

      .position {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        position: relative;
        left: 0;
        top: 8px;
        height: 108px;
        width: 100%;

        .picture {
          // display: flex;
          // justify-content: center;
          // align-items: center;
          width: 108px;
          height: 108px;
          background: #fff;
          border-radius: 50%;

          img {
            object-fit: cover;
            position: relative;
            left: 50%;
            top: 50%;
            width: 100px;
            height: 100px;
            border-radius: 50%;
            transform: translate(-50%, -50%);
          }
        }

        .info {
          // margin-top: 14px;
          margin-bottom: 14px;
          margin-left: 30px;

          .name {
            font-family: PMingLiU-ExtB;
            font-size: 20px;
            color: #ffffff;
          }

          .label {
            margin-top: 10px;
            margin-right: 5px;
            width: fit-content;
            display: inline-block;
            height: 21px;
            padding: 1px 2px;
            line-height: 21px;
            background-color: #fea91b;
            border-radius: 5px;
            font-family: PMingLiU-ExtB;
            font-size: 14px;
            color: #fff;
          }
        }

        .countInfo {
          margin: 0 0 0 auto;
          display: flex;

          .infoBox {
            margin-left: 35px;

            .title {
              line-height: 1.5;
              font-family: PMingLiU-ExtB;
              font-size: 18px;
              color: #ffffff;
            }

            .desc {
              line-height: 1;
              text-align: center;
              font-family: Segoe UI;
              font-size: 18px;
              color: #ffffff;
            }
          }
        }
      }
    }
  }

  .switchBtn {
    padding-top: 30px;
    margin: 0 auto;
    max-width: 1200px;
    .activeDesc {
      margin-left: 10px
      color: #409eff
    }
  }
}
</style>